<template>
  <Menu ref="menu" theme="dark" :accordion="true" :open-names="openmenusid" :active-name="activeid">
    <Submenu :name="(i+1).toString()" v-for="(item,i) in menulist">
      <template slot="title">
        <Icon :type="item.icon"/>
        {{item.label}}
      </template>
      <MenuItem :name="(i+1)+'-'+(j+1)" :to="sub.path" v-for="(sub,j) in item.sublist">{{sub.label}}</MenuItem>
    </Submenu>
  </Menu>
</template>
<script>
import { menuList } from "@/config";
import { mapState } from "vuex";
export default {
  data() {
    return {
      menulist: menuList
    };
  },
  //mapState用于将vuex中的state映射成组件的计算属性
  computed: mapState(["activeid", "openmenusid"]),
  watch: {
    openmenusid(val) {
      //setTimeout(fn,0)
      //当前事件循环结束后执行
      this.$nextTick(() => {
        //手动让menu按当前设置的值展开
        this.$refs.menu.updateOpened();
      });
    }
  }
};
</script>
